<template>
    <div class="chamber-manage-pane">
        <el-form :model="maxCapacityOptions" ref="searchFormRef">
            <el-row>
                <el-col :span="5" class="grid-cell">
                    <el-form-item label="参会人数：" prop="maxCapacity" class="label-right-align">
                        <el-select-v2 :options="maxCapacityOptions" v-model="search.maxCapacity" placeholder="请选择参数人数"
                                      clearable @change="searchClick"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8" :offset="1" class="grid-cell">
                    <el-form-item label="当前状态：" prop="status" class="label-right-align">
                        <el-select-v2 :options="statusOptions" @change="searchClick" clearable v-model="search.status"
                                      placeholder="请选择状态"/>
                    </el-form-item>
                </el-col>
                <el-col :span="4" :offset="5" class="grid-cell">
                    <div class="static-content-item">
                        <el-button @click="addChamberClick" type="primary" plain>新增会议室</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="tableData" :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
            <el-table-column label="编号" width="55" v-if="show" type="index"></el-table-column>
            <el-table-column label="会议室名称" prop="chamberName"></el-table-column>
            <el-table-column label="会议室地址" prop="address"></el-table-column>
            <el-table-column label="会议室配置" prop="config"></el-table-column>
            <el-table-column label="可容纳人数" prop="maxCapacity" style=""></el-table-column>
            <el-table-column label="当前状态">
                <template #default="e">
                    <template v-if="e.row.status === 0">
                        <el-tag type="primary">可使用</el-tag>
                    </template>
                    <template v-if="e.row.status === 1">
                        <el-tag type="danger">不可使用</el-tag>
                    </template>
                    <template v-if="e.row.status === 2">
                        <el-tag type="success">使用中</el-tag>
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime" width="180"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <template v-if="scope.row.status === 0">
                        <el-button size="mini" @click="toggleStatusClick(scope.row,1)" type="danger" plain>禁用</el-button>
                    </template>
                    <template v-if="scope.row.status === 1">
                        <el-button size="mini" @click="toggleStatusClick(scope.row,0)" type="primary" plain>启用</el-button>
                    </template>
                  <template v-if="scope.row.status === 2">
                    <el-button size="mini" @click="toggleStatusClick(scope.row,0)" type="danger" plain disabled>禁用</el-button>
                  </template>
                    <template v-if="scope.row.status === 2 ">
                        <el-button size="mini" @click="deleteChamberClick(scope.$index, scope.row)" type="danger"  disabled>删除</el-button>
                    </template>
                  <template v-if="scope.row.status !== 2 ">
                    <el-button size="mini" @click="deleteChamberClick(scope.$index, scope.row)" type="danger"  >删除</el-button>
                  </template>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <chamber-form ref="chamberFormRef"/>
</template>

<script>
import {chember, deleteChamber, updateChamber} from "../../../../network/adm/chamber";
import ChamberForm from "../form/ChamberForm.vue";

export default {
    name: "ChamberManagePane",
    components: {ChamberForm},
    data() {
        return {
            maxCapacityOptions: [
                {
                "label": "5人",
                "value": 5
                },
                {
                "label": "10人",
                "value": 10
                },
                {
                "label": "15人",
                "value": 15
                },
                {
                "label": "20人",
                "value": 20
                }
            ],
            statusOptions: [
                {
                    "label": "可使用",
                    "value": 0
                },
                {
                    "label": "不可使用",
                    "value": 1
                }
            ],
            show: true,
            tableData: [],
            search: {maxCapacity: null, status: null}
        }
    },
    methods: {
        addChamberClick(){
            this.$refs.chamberFormRef.dialogVisible = true;
        },
        searchClick() {
            this.loadChamberData();
            console.log(this.search.maxCapacity)
            console.log(this.search.status)
        },
        toggleStatusClick(row, type) {
            // console.log('当前选中的行值：', row)
            // console.log(type)
            updateChamber({
                    status: type,
                    id: row.id
                }
            ).then(vo => {
                this.loadChamberData();
            })
        },
        deleteChamberClick(index, row) {
            this.$operate.remove({
                title: '删除物品',
                data: row.chamberName,
                executeFn: () => {
                    deleteChamber([row.id]).then(data => {
                        this.$response.handle({
                            data: data,
                            success: "删除成功",
                            successFn: () => {
                                this.loadChamberData()
                            }
                        })
                    })
                }
            })
        },
        loadChamberData(){
            let params ={
                maxCapacity:this.search.maxCapacity,
                status: this.search.status
            }
            chember(params).then(vo=>{
                this.$response.loadPageInfo({
                    data: vo,
                    executeFn: ()=>{
                        this.tableData = vo.list;
                    },
                    log: '会议室的信息'
                })
            })
        },
    },
    created() {
        this.loadChamberData();
    }
}
</script>

<style scoped>
* {

}

.chamber-manage-pane {

}
</style>
